<template>
  <div class="box">
    <el-row :gutter="0" class="content">
      <el-col :span="15" class="bleft" id="bleft">
        <el-row
          style="height: 30px;line-height: 30px;text-align: center; background: #19202f;color: #fff;font-size: 12px;"
        >
          <el-col :span="2" style="height: 30px;overflow:hidden;">
            <el-button
              @click="back"
              style="position: relative;top: -4px;color:#fff;"
              icon="el-icon-arrow-left"
              type="text"
              >返回
            </el-button>
          </el-col>
          <el-col
            :span="4"
            :offset="18"
            style="height: 30px;text-align:center;background:#353a49;color: #d3d4dc;"
          >
            <div
              style=" position: relative; width: 100%; height: 100%;"
              @mouseover="isShowMenu = true"
              @mouseleave="isShowMenu = false"
            >
              <i class="el-icon-menu"></i>
              本关目录
              <div
                v-show="isShowMenu"
                style="position: absolute;top: 30px;right:0;background: #353a49;z-index: 9; width: 100%"
              >
                <div
                  class="menu-row"
                  v-for="(menuValues, menuKey) in menus"
                  :key="menuKey"
                >
                  <div class="title">{{ menuKey }}</div>
                  <a
                    class="menu-c"
                    href="javascript:void(0)"
                    v-for="(menuValue, key) in menuValues"
                    @click="AnchorLinkTo(key)"
                    :key="key"
                    >{{ menuValue }}</a
                  >
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="height:100%;width:100%;">
          <el-scrollbar
            ref="myScrollbar"
            style="height: 103%; font-size: 16px;"
          >
            <el-row
              class="info_row"
              v-for="(data, index) in datas"
              v-bind:key="index"
              :ref="'row' + data.chapter_id"
            >
              <el-col :span="1" class="image_box" v-if="data.special_id != 14">
                <el-avatar
                  size="small"
                  class="image_con"
                  :src="url"
                ></el-avatar>
              </el-col>
              <el-col
                :span="23"
                class="info_box"
                style="white-space: pre-wrap; height: 180px;"
                v-if="data.special_id == 19"
              >
                <editor
                  class="deditor"
                  v-model="data.question_title"
                  @init="editorInit"
                  lang="java"
                  theme="monokai"
                ></editor>
              </el-col>
              <el-col
                :span="23"
                class="info_box"
                style="position: relative;"
                v-else-if="data.special_id == 10"
              >
                点击右侧按钮，在代码区运行操作 >
                <div
                  style="position: absolute; right: 0;top: 3px;"
                  v-if="data.user_answer_id == undefined"
                >
                  <el-button class="spe-button" @click="clickLx(index)"
                    >开始运行</el-button
                  >
                </div>
                <div style="position: absolute; right: 0;top: 3px;" v-else>
                  <el-button class="spe-button" @click="clickLx(index)"
                    >重新练习</el-button
                  >
                  <!--              <el-button class="spe-button">查看运行</el-button>-->
                </div>
              </el-col>
              <el-col
                :span="23"
                class="info_box"
                v-else-if="
                  data.special_id == 4 ||
                    data.special_id == 22 ||
                    data.special_id == 23
                "
              >
                <el-image
                  class="info_image"
                  @load="scrollBottom"
                  :src="'http://a.jajava.cn' + data.question_img"
                ></el-image>
              </el-col>
              <el-col
                :span="23"
                class="info_box"
                v-else-if="data.special_id == 3"
              >
                <span style="font-weight: bold;color: #ffffff;">{{
                  data.question_title
                }}</span>
                <br />
                <el-button
                  style="position: relative;color:#c6c7e0;text-align: left;margin-right: 200px;"
                  @click.native="andClick(index, ind)"
                  v-for="(item, ind) in JSON.parse(data.answers)"
                  :key="ind"
                  :label="ind"
                  class="info_box_radio"
                  :style="{
                    border:
                      data.user_answer_id != undefined && data.answer_id == ind
                        ? '1px solid #3bba7c'
                        : data.user_answer_id == ind
                        ? '1px solid #ff5953'
                        : 'none'
                  }"
                >
                  {{ radioIndexs[ind] }}.<span
                    v-html="item"
                    style="white-space: pre-wrap; line-height: 20px;"
                  ></span>
                  <i
                    v-if="
                      data.user_answer_id != undefined && data.answer_id == ind
                    "
                    class="el-icon-check"
                    style="background-color: #3bba7c;border-radius: 10px;padding: 2px; position: absolute; right: 10px; top:8px;"
                  ></i>
                  <i
                    v-else-if="
                      data.user_answer_id != undefined &&
                        data.user_answer_id == ind
                    "
                    class="el-icon-close"
                    style="background-color: #ff5953;border-radius: 10px;padding: 2px; position: absolute; right: 10px; top:8px;"
                  ></i>
                </el-button>
              </el-col>

              <el-col
                :span="23"
                class="info_box"
                v-else-if="data.special_id == 98"
              >
                <span
                  style="font-weight: bold; color: #00BFFF; font-size: 18px;"
                  >{{ data.question_title }}</span
                >
              </el-col>
              <el-col
                :span="23"
                class="info_box"
                v-else-if="data.special_id == 99"
              >
                <span
                  style="font-weight: bold; color: #1E90FF; font-size: 22px;"
                  >{{ data.question_title }}</span
                >
              </el-col>
              <el-col :span="23" class="info_box" v-else>
                {{ data.question_title }}
              </el-col>
            </el-row>
            <el-row class="info_row">
              <el-col :span="24" v-if="isEnd">
                <el-row style="background: #19202f;height: 35px;">
                  <el-col
                    :span="24"
                    style="font-size: 14px; font-weight: bold;color: #c6c7e0; line-height: 35px; padding-left: 30px;"
                  >
                    课后练习
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="text-align: center; padding: 70px;">
                    <router-link
                      :to="{
                        name: 'CodeAfter',
                        query: { guan_id, course_id, token }
                      }"
                      v-if="guanConstantData.isHomework"
                    >
                      <el-button class="button-left button">
                        作业
                      </el-button>
                    </router-link>
                    <el-button
                      class="button-left button"
                      style="background-color: #00BFFF"
                      v-if="this.guanConstantData.isExamination"
                      @click="linkExamination"
                    >
                      考试
                    </el-button>
                    <el-button
                      v-if="nextGuanName"
                      class="button-right button"
                      @click="nextGuan"
                      >{{ nextGuanName }}
                    </el-button>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row style="height: 20%;width: 100%">
              <el-col :span="24" style="padding-bottom: 100px;"></el-col>
            </el-row>
          </el-scrollbar>
        </el-row>
        <el-button
          class="nextButton"
          type="primary"
          icon="el-icon-right"
          circle
          @keyup.enter="nextClick"
          @click="nextClick"
        ></el-button>
        <el-progress
          style="position: absolute;bottom: -5px;width: 100%;margin-right: -20px;"
          v-if="datas.length > 1 && replies_total_number > 1"
          :text-inside="true"
          :stroke-width="5"
          :percentage="parseInt((datas.length / replies_total_number) * 100)"
        ></el-progress>
      </el-col>
      <el-col :span="9" class="bright" v-if="content.length > 0">
        <div class="bright_code" id="codeEdit">
          <editor
            v-if="content.length > 0"
            class="deditor"
            v-model="content"
            @init="editorInit"
            lang="java"
            theme="monokai"
          ></editor>
          <div v-else>等待程序运行</div>
          <el-button class="spe-button click-skip" @click="clickSkip"
            >跳过</el-button
          >
          <el-button class="spe-button click-reste" @click="codeReste"
            >重置</el-button
          >
          <el-button class="spe-button click-run" @click="clickRun(true)"
            >点击运行</el-button
          >
        </div>
        <div class="bright_result">
          <el-button
            v-if="codeResult.length > 0"
            class="spe-button click-resteResult"
            @click="resultReste"
            >重做
          </el-button>
          <el-button
            v-if="codeResult.length > 0"
            class="spe-button click-share"
            @click="share"
            >分享</el-button
          >
          <div
            style="width: 100%;white-space: pre-wrap; font-family: “宋体”, sans-serif;"
          >
            终端（输入完后按回车键）<br /><span v-html="finalCR"></span>
          </div>
          <input
            ref="inputText"
            @keyup.enter="clickRun"
            v-model="inputText"
            class="input-textarea"
          />
          <div
            v-if="errMessage && errMessage !== true"
            style="width: 40%;position: fixed;bottom: 10px;background: red;opacity: 0.7;border-radius: 5px;padding: 3px;"
          >
            {{ errMessage }}
          </div>
          <div
            v-if="errMessage === true"
            style="width: 40%;position: fixed;bottom: 10px;background: #108861;opacity: 0.7;border-radius: 5px;padding: 3px;"
          >
            程序运行通过
          </div>
        </div>
      </el-col>
      <el-col :span="8" v-else style="padding: 10%;">
        <el-image
          style="width: 100%; height: 100%"
          :src="require('@/assets/workspace.png')"
          fit="fill"
        ></el-image>
      </el-col>
    </el-row>
    <el-dialog
      title="代码分享"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span style="white-space: pre-wrap;">{{ codeResult }}</span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listOldAnswere,
  submitAnswere,
  getQuestionTotal,
  codeRun,
  learnTime
} from "@/api/api";

let isSendStatus = false; // true 数据请求中 false 数据请求完成
let _index = undefined; // 当前选中状态的题目
export default {
  name: "CodeInit",
  components: {
    editor: require("vue2-ace-editor")
  },
  data() {
    return {
      radioIndexs: ["A", "B", "C", "D", "E", "F", "G"],
      radio: "1",
      guanConstantData: {},
      url:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      content: "",
      bakContent: "",
      nextId: undefined,
      datas: [],
      guan_id: 1,
      nextGuanName: undefined,
      nextGuanId: undefined,
      codeId: undefined,
      codeResult: "",
      inputText: "",
      errMessage: undefined,
      course_id: undefined,
      isEnd: false,
      token: undefined,
      replies_total_number: 1,
      // backUrl: 'http://jajava.cn/products',
      backUrl: "http://jajava.cn/course_card/",
      dialogVisible: false,
      nextStatus: true,
      menus: undefined,
      isShowMenu: false
    };
  },
  computed: {
    finalCR() {
      return this.codeResult
        ? this.codeResult
            .replace(/[\n\r]/g, "<br>")
            .replace(/\s/g, '<span style="visibility:hidden;">*</span>')
        : "";
    }
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      window.location.reload();
    }
  },
  mounted() {
    let _this = this;
    document.onkeydown = function(e) {
      let currKey = 0;
      e = e || event;
      currKey = e.keyCode || e.which || e.charCode; // 支持IE、FF
      if (
        currKey === 13 &&
        (document.activeElement.tagName === "BODY" || _this.content.length < 1)
      ) {
        _this.nextClick();
      }
    };
    // this.nextClic()
    // submitAnswere({token: dataToken.token, }).then(res => {
    //   console.log(res)
    // })
    this.course_id = this.$route.query.course_id;
    this.guan_id = this.$route.query.guan_id;
    this.token = this.$route.query.token;
    if (!this.course_id) {
      this.$message("请传入course_id");
      return;
    }
    if (!this.guan_id) {
      this.$message("请传入guan_id");
      return;
    }
    if (!this.token) {
      this.$message("请传入token");
      return;
    }
    this.$store.dispatch("setToken", this.token);
    this.backUrl += this.course_id;
    this.initData();
    this.timer = setInterval(this.sendTime, 1000 * 61);
  },
  methods: {
    sendTime() {
      learnTime({
        token: this.token,
        guan_id: this.guan_id,
        course_id: this.course_id
      }).then(res => {
        console.log(res);
      });
    },
    AnchorLinkTo(ref) {
      let refs = this.$refs["row" + ref];
      if (refs && refs.length > 0) {
        this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
          "row" + ref
        ][0].$el.offsetTop;
      }
    },
    handleClose(done) {
      done();
    },
    back() {
      window.location.href = this.backUrl;
    },
    resultReste() {
      this.codeResult = "";
      this.codeId = undefined;
      this.inputText = "";
    },
    share() {
      this.dialogVisible = true;
    },
    codeReste() {
      this.codeResult = "";
      this.codeId = undefined;
      this.inputText = "";
      this.content = this.bakContent;
    },
    clickSkip() {
      this.content = "";
      this.nextStatus = true;
    },
    clickRun(isRun) {
      let self = this;
      console.log(_index);
      if (
        _index === 86 ||
        _index === 977 ||
        _index === 1736 ||
        _index === -977
      ) {
        self.codeConstantRun(_index);
        return;
      }
      let param = "";
      if (isRun === true) {
        self.codeResult = "";
        self.codeId = undefined;
        self.inputText = "";
        param = "java_source=" + this.content;
      } else {
        self.codeResult += "\n" + self.inputText;
        param = "codeId=" + self.codeId + "&subVal=" + self.inputText;
        self.inputText = "";
      }
      codeRun(encodeURI(param).replace(/\+/g, "%2B")).then(res => {
        console.log(res);
        res = res.data + "";
        self.errMessage = undefined;
        if (res.indexOf("error:") === 0) {
          self.errMessage =
            "程序编译出错.错误在第" +
            res.substring(res.indexOf(".java:") + 1, res.indexOf(": error:")) +
            "行";
          self.$refs.inputText.blur();
          return;
        }
        if (res.indexOf("java.lang.IllegalAccessException") > -1) {
          self.errMessage = "类声明必须为：public class ***";
          self.$refs.inputText.blur();
          return;
        }
        let datas = res.split("--<>--");

        self.codeResult += "\n" + datas[0];
        self.codeId = datas[1];
        if (self.codeId && self.codeId.length > 0) {
          self.$refs.inputText.focus();
        } else {
          self.$refs.inputText.blur();
          self.nextStatus = true;
          self.errMessage = true;
        }
      });
    },
    codeConstantRun(index) {
      console.log(index);
      let self = this;
      let strs = [];
      if (index === 86) {
        self.codeResult +=
          "\n" +
          "哈喽，你是我的新朋友吗，我先自我介绍一下，我叫Java，是一门计算机编程语言";
        strs = [
          "\n" + "1996年，我的创造者——Sun公司把我开发出来",
          "\n" + "有人说我的出生，是网络世界的巨大改革",
          "\n" +
            "这也没错，我具有着“编写一次，到处运行”的特点，实现了在不同系统之间的相互操作",
          "\n" +
            "不仅如此，我既避免了同行前辈C++中存在的弊端，也有我自身的两大特征-功能强大和简单易用",
          "\n" +
            "而且有着简单，可靠，安全，可移植性，高性能等优点，所以也有人叫我C++--",
          "\n" +
            "功能强大的我，瞬间成为了最流行的编程语言，成为了世界第一编程语言，并且促进了网络的发展，你所看到的游戏，软件，各网络平台，几乎都是由我来开发的，可以说我和你们的生活息息相关",
          "\n" +
            "而且简单易用的我，也成为了编程语言小白的青睐，成为了小白的专属，能够快速入门，快速实现你的目标，而且在很多高深的领域也有我的主场",
          "\n" +
            "也是正因如此，无论是下至小学生，上至大叔大妈，左至技术性人才，右至非技术性文职小白，都一致青睐于我",
          "\n" +
            "不管怎么说，我是你实现目标的一个高效工具，只要你有需求，我就能帮的上忙",
          "\n" +
            "既然你选择了我，我会好好帮助你，带你紧跟信息科技时代的步伐，创造属于时代的新鲜产物，甚至引领时代方向"
        ];
      }
      if (index === -977) {
        if (self.inputText === "1") {
          self.codeResult += "\n" + "霍格沃茨欢迎您的到来。";
        } else {
          self.codeResult +=
            "\n" + "您可是被梅林选中的孩子，我们不接受这个选项。";
        }
        self.nextStatus = true;
        self.errMessage = true;
        return;
      }
      if (index === 977) {
        _index = -977;
        self.codeResult += "\n" + "亲爱的同学";
        strs = [
          "\n" + "我们愉快地通知您,您已获准在霍格沃兹魔法学校就读",
          "\n" + "随信附上所需书籍及装备一览",
          "\n" + "学期定于九月一日开始.",
          "\n" + "鉴于您对魔法世界的不熟悉，",
          "\n" + "我们将指派魔咒学老师——小法带您购买学习用品。",
          "\n" + "我们将于七月三十一日前静候您的猫头鹰带来的回信。",
          "\n" + "校长（女）米勒娃·麦格谨上",
          "\n" + "那么，您的选择是什么？`1`接受，还是`2`放弃呢？",
          "\n" + "请输入您选择的数字:"
        ];
      }
      if (index === 1736) {
        self.codeResult += "\n" + "【玩家】\n血量：100\n攻击：50";
        self.codeResult += "\n" + "------------------------";
        strs = [
          "\n" + "【敌人】\n血量：100\n攻击：30\n------------------------",
          "\n" + "【敌人】\n血量：100\n攻击：30\n------------------------",
          "\n" + "你发起了攻击.【敌人】剩余血量50",
          "\n" +
            "敌人向你发起了攻击.【玩家】剩余血量70\n------------------------",
          "\n" + "你发起了攻击，【敌人】剩余血量0",
          "\n" +
            "敌人向你发起了攻击，【玩家】剩余血量40\n------------------------",
          "\n" + "敌人死翘翘了，你赢了！"
        ];
      }
      let _i = 0;
      (function xh() {
        self.codeResult += strs[_i++];
        if (strs.length <= _i) {
          if (index !== 977) {
            self.nextStatus = true;
            self.errMessage = true;
          }
          return;
        }
        setTimeout(xh, 1500);
      })();
    },
    clickLx(index) {
      _index = this.datas[index].id;
      this.content = this.datas[index].question_title;
      this.bakContent = this.datas[index].question_title;
      this.codeResult = "";
      this.codeId = undefined;
      this.inputText = "";
      this.errMessage = undefined;
    },
    andClick(index, ind) {
      // 单选触发
      if (this.datas[index].user_answer_id !== undefined) {
        return;
      }
      let self = this;
      submitAnswere({
        token: self.token,
        guan_id: self.guan_id,
        answer_id: ind,
        qid: index,
        course_id: self.course_id
      }).then(() => {
        self.datas[index].user_answer_id = ind;
        // if (self.datas[index].answer_id - 1 !== ind) {
        //   self.datas[index][self.datas[index].id + 'answer'] = {
        //     question_title: self.datas[index].question_content,
        //     special_id: 3,
        //     answers: '[]'
        //   }
        // }
        // self.datas[index] = {...self.datas[index]}
        self.datas = [...self.datas];
        this.nextStatus = true;
      });
    },
    nextClick() {
      // 下一题
      if (!this.nextStatus) {
        this.$message("请回答当前问题！");
        return;
      }
      if (isSendStatus) {
        // this.$message(
        //   "提示：学习是一个循序渐进的过程，必须抱有长期坚持的耐心，慢慢消化课程内容，勿点击太快喔~"
        // );
        return;
      }
      isSendStatus = true;
      this.$axios
        .post("/api/getNextQuestion", {
          token: this.token,
          guan_id: this.guan_id,
          current_question_id: this.nextId,
          course_id: this.course_id
        })
        .then(data => {
          const form = data.data.data[0];
          this.nextId = form.next_question;
          // console.log(this.datas)
          this.datas.push(form);
          isSendStatus = false;
          // this.datas = {...this.datas}
          if (form.special_id === 3 || form.special_id === 10) {
            this.nextStatus = false;
          }
          this.scrollBottom();
          this.content = "";
        })
        .catch(e => {
          console.log(e);
          this.isEnd = true;
          isSendStatus = false;
          this.nextStatus = true;
          this.$message("没有更多了");
          this.scrollBottom();
          this.content = "";
        });
    },
    linkExamination() {
      window.location.href = this.guanConstantData.examinationUrl;
    },
    nextGuan() {
      // lwj 2020.8.5 修改，下一关跳转为动态链接跳转
      window.location.href = this.guanConstantData.next_level_url;
      // window.location.reload();
      // this.guan_id = this.nextGuanId;
      // this.datas = [];
      // this.nextId = undefined;
      // this.isEnd = false;
      // this.content = "";
      // this.initData();
    },
    scrollBottom() {
      this.$nextTick(() => {
        this.$refs["myScrollbar"].wrap.scrollTop = this.$refs[
          "myScrollbar"
        ].wrap.scrollHeight;
      });
    },
    initData() {
      // 初始化数据
      const self = this;
      listOldAnswere({
        token: self.token,
        guan_id: self.guan_id,
        course_id: self.course_id
      })
        .then(res => {
          let datas = res.data.data;
          for (let j = 0; j < datas.length; j++) {
            self.nextId = datas[j].next_question;
            if (j === datas.length) {
              if (datas[j].special_id === 3 || datas[j].special_id === 10) {
                if (datas[j].user_answer_id !== undefined) {
                  return;
                }
                self.nextStatus = false;
              }
            }
            try {
              if (datas[j].special_id === 3) {
                JSON.parse(datas[j].answers);
              }
              this.datas.push(datas[j]);
            } catch (e) {
              // console.log(JSON.parse(datas[j].answers))
              console.log("异常数据=====》", datas[j], e);
            }
          }
          getQuestionTotal({
            token: self.token,
            guan_id: this.guan_id,
            course_id: self.course_id
          }).then(res => {
            this.nextGuanName = res.data["next_level_name"];
            this.nextGuanId = res.data["next_level_id"];
            this.replies_total_number = res.data["replies_total_number"];
            this.menus = res.data["catalog"];
            this.url = res.data["teacher_photo"];
            /**
             * isExamination   是否有考试 1：有 0：没有
             * examinationUrl   考试跳转url
             * isHomework      是否有作业 1：有 0：没有
             */
            this.guanConstantData.isExamination = res.data["isExamination"];
            this.guanConstantData.examinationUrl = res.data["examinationUrl"];
            this.guanConstantData.isHomework = res.data["isHomework"];
            this.guanConstantData.next_level_url = res.data["next_level_url"];
            if (datas.length >= this.replies_total_number) {
              this.isEnd = true;
            }
            this.scrollBottom();
          });
        })
        .catch(() => {
          self.nextClick();
        });
    },
    editorInit() {
      require("brace/ext/language_tools");
      require("brace/mode/java");
      require("brace/theme/monokai");
    }
  }
};
</script>
<style>
#codeEdit .ace_active-line {
  background-color: #19202f !important;
}

#codeEdit .ace_gutter-cell {
  background-color: #19202f;
}
</style>
<style scoped>
body {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.title {
  text-indent: 1em;
  color: #eee;
}

.menu-row {
  text-align: left;
}

.menu-c {
  display: block;
  text-decoration: none;
  text-indent: 2em;
  color: #898aa0;
}

.input-textarea {
  width: 100%;
  background: #19202f;
  border: none;
  outline: none;
  color: #fff;
}

.click-run {
  position: absolute;
  right: 60px;
  bottom: 20px;
}

.click-skip {
  position: absolute;
  right: 260px;
  bottom: 20px;
}

.click-reste {
  position: absolute;
  right: 160px;
  bottom: 20px;
}

.click-resteResult {
  position: absolute;
  right: 60px;
  top: 15px;
}

.click-share {
  position: absolute;
  right: 160px;
  top: 15px;
}

.ace-monokai {
  background-color: #19202f;
}

.ace_gutter {
  display: none;
}

.box {
  color: aliceblue;
  width: 100%;
  background-color: #19202f;
  height: 100%;
}

.content {
  height: 100%;
  overflow: hidden;
}

.bleft {
  background-color: #272c36;
  height: 100%;
  position: relative;
  word-break: break-all;
  letter-spacing: 0;
  line-height: 30px;
  font-size: 1.6rem;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, Source Han Sans SC,
    WenQuanYi Micro Hei, sans-serif;
}

.bright {
  height: 100%;
  /*background: url("https://resource.oss.yatiku.com/pycoding/workspace.png") no-repeat center/150px;*/
  background-color: #272c36;
}

.bright_code {
  overflow: hidden;
  width: 100%;
  padding: 20px;
  height: 50%;
  position: relative;
  background-color: #19202f;
}

.deditor {
  width: 100%;
  margin-left: -8px;
  margin-bottom: -10px;
  overflow: hidden;
  font-size: 18px;
}

.bright_result {
  position: relative;
  width: 100%;
  padding: 20px;
  margin-top: 8%;
  height: 35%;
  overflow-y: scroll;
  background-color: #19202f;
}

.nextButton {
  position: absolute;
  bottom: 40px;
  right: 20px;
  z-index: 999;
}

.info_row {
  padding: 10px;
}

.image_box {
  padding: 3px 7px;
}

.image_con {
  border-radius: 20px;
  width: 25px;
  height: 25px;
}

.info_box {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, Source Han Sans SC,
    WenQuanYi Micro Hei, sans-serif;
  padding: 3px 10px;
  color: #c6c7e0;
  font-size: 16px;
  border-left: solid 1px #c2a645;
}

.info_image {
  max-width: 80%;
}

.info_box_radio {
  padding: 8px 10px;
  margin: 3px 0px;
  /*border-radius: 10px;*/
  background-color: #19202f;
  width: 520px;
}

.sidebar {
  position: fixed;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: transform 0.25s ease-out;
  width: 300px;
  z-index: 3;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.sidebar:hover::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 53%, 0.4);
}

.sidebar:hover::-webkit-scrollbar-track {
  background: hsla(0, 0%, 53%, 0.1);
}

#bleft .el-scrollbar__wrap,
.el-scrollbar {
  overflow-x: hidden !important;
}

.spe-button {
  width: 90px;
  height: 30px;
  background: #496fff;
  color: #fff;
  font-size: 12px;
  line-height: 10px;
  border: none;
  z-index: 9;
}

.button {
  width: 25%;
  height: 80px;
  color: #fff;
  border: none;
}

.button-left {
  margin-right: 80px;
  background: #433ecf;
}

.button-right {
  background: #05af75;
}
</style>
